<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center" *ngIf="isGranted('Mes58.Pages.Resource.Tooling.Caret')">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>工装管理</span>
                </h3>
                <button type="button" (click)="showAction(1)"
                    class="btn btn-outline-primary m-btn m-btn--custom m-btn--outline">
                    <i class="fa fa-shopping-cart"></i>借出
                    <!-- <span class="m-badge m-badge--danger">2</span> -->
                </button>
                <button type="button" (click)="showAction(2)"
                    class="btn btn-outline-success m-btn m-btn--custom m-btn--outline"><i
                        class="fa fa-shopping-cart"></i>返修</button>
                <button type="button" (click)="showAction(3)"
                    class="btn btn-outline-warning m-btn m-btn--custom m-btn--outline"><i
                        class="fa fa-shopping-cart"></i>送检</button>
                <button type="button" (click)="showAction(4)"
                    class="btn btn-outline-info m-btn m-btn--custom m-btn--outline"><i
                        class="fa fa-shopping-cart"></i>技改</button>
                <button type="button" (click)="showAction(5)"
                    class="btn btn-outline-warning m-btn m-btn--custom m-btn--outline"><i
                        class="fa fa-shopping-cart"></i>隔离</button>
                <button type="button" (click)="showAction(6)"
                    class="btn btn-outline-danger m-btn m-btn--custom m-btn--outline"><i
                        class="fa fa-shopping-cart"></i>报废</button>
            </div>
            <div class="col-xs-6 text-right">
                <div class="btn-group dropdown" dropdown container="body">
                    <button dropdownToggle class="btn btn-outline-success dropdown-toggle" style="margin-right: 10px;">
                        <i class="fa fa-file-excel-o"></i>Excel操作
                    </button>
                    <div class="dropdown-menu" *dropdownMenu>
                        <!-- 在 onlyLink 为 true 时， btnColor 将不再起作用 -->
                        <excel-import [showIcon]="false" [onlyLink]="true" [btnColor]="'success'"
                            [btnText]="'导入(按导出模板)'" (onUpload)="onUpload($event)"></excel-import>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="javascript:;" (click)="exportToExcel(true)">导出模板</a>
                        <a class="dropdown-item" href="javascript:;" (click)="exportToExcel(false)">导出所有数据</a>
                    </div>
                </div>
                <button (click)="createOrEditToolingModal.show()" class="btn btn-primary blue"><i
                        class="fa fa-plus"></i> 创建新的工装</button>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">

                <form class="horizontal-form" autocomplete="off">
                    <div class="m-form m-form--label-align-right">
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-xl-12">
                                <div class="form-group m-form__group align-items-center">
                                    <div class="input-group">
                                        <input [(ngModel)]="filterText" name="filterText" autoFocus
                                            class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                            type="text">
                                        <span class="input-group-btn">
                                            <button (click)="getToolings()" class="btn btn-primary" type="submit"><i
                                                    class="flaticon-search-1"
                                                    [attr.aria-label]="l('Search')"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row m--margin-bottom-10" [hidden]="!advancedFiltersAreShown">

                            <div class="col-md-6">
                                <div class="m-checkbox-list">
                                </div>
                            </div>
                        </div>

                        <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
                            <div class="col-sm-12 text-right">
                                <button class="btn btn-metal" (click)="getToolings()"><i class="fa fa-refresh"></i>
                                    {{l("Refresh")}}</button>
                            </div>
                        </div>
                        <div class="row margin-bottom-10">
                            <div class="col-sm-12">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <p-table #dataTable (onLazyLoad)="getToolings($event)" [value]="primengTableHelper.records"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 130px" *ngIf="isGranted('Mes58.Pages.Resource.Tooling.Caret')">{{l('Actions')}}
                                    </th>
                                    <th style="width: 150px" pSortableColumn="title">
                                        名称
                                        <p-sortIcon field="title"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="subTitle">
                                        工装图号
                                        <p-sortIcon field="subTitle"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="isDrawing">
                                        有无图纸
                                        <p-sortIcon field="isDrawing"></p-sortIcon>
                                    </th>
                                    <th style="width: 250px">
                                        对应产品图号
                                    </th>
                                    <th style="width: 150px" pSortableColumn="model">
                                        型号
                                        <p-sortIcon field="model"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="stamp">
                                        钢印号
                                        <p-sortIcon field="stamp"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="location">
                                        位置
                                        <p-sortIcon field="location"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="category">
                                        类别
                                        <p-sortIcon field="category"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px">
                                        工装类型
                                    </th>
                                    <th style="width: 150px" pSortableColumn="manufactureDate">
                                        制造日期
                                        <p-sortIcon field="manufactureDate"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="intoStockDate">
                                        入库日期
                                        <p-sortIcon field="intoStockDate"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="receiptTime">
                                        接收时间
                                        <p-sortIcon field="receiptTime"></p-sortIcon>
                                    </th>

                                    <th style="width: 150px" pSortableColumn="manufacturer">
                                        制造单位
                                        <p-sortIcon field="manufacturer"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="groupParts">
                                        组配件
                                        <p-sortIcon field="groupParts"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="certificate">
                                        有无合格证
                                        <p-sortIcon field="certificate"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="handover">
                                        有无交接单
                                        <p-sortIcon field="handover"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="toolingRecord">
                                        有无履历卡
                                        <p-sortIcon field="toolingRecord"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="isVerificationCard">
                                        有无检定卡
                                        <p-sortIcon field="isVerificationCard"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="isNeedVerification">
                                        需周期检定
                                        <p-sortIcon field="isNeedVerification"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="verificationDate">
                                        鉴定日期
                                        <p-sortIcon field="verificationDate"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="nextVerificationDate">
                                        鉴定有效期
                                        <p-sortIcon field="nextVerificationDate"></p-sortIcon>
                                    </th>

                                    <th style="width: 150px">
                                        其他资料
                                    </th>
                                    <th style="width: 150px">
                                        最大载荷
                                    </th>
                                    <th style="width: 150px">
                                        所属资产
                                    </th>
                                    <th style="width: 150px">
                                        责任人
                                    </th>
                                    <th style="width: 150px">
                                        工艺员
                                    </th>
                                    <th style="width: 200px">
                                        备注
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 130px" *ngIf="isGranted('Mes58.Pages.Resource.Tooling.Caret')">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span>
                                                {{"Actions" | localize}}
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li *ngIf="record.status === 3">
                                                    <a (click)="backStock(record)">入库</a>
                                                </li>
                                                <li *ngIf="record.status === 2">
                                                    <a (click)="cancelCar(record)">取消</a>
                                                </li>
                                                <li *ngIf="record.status === 1">
                                                    <a (click)="goCar(record, 1)">加入借出车</a>
                                                </li>
                                                <li *ngIf="record.status === 1">
                                                    <a (click)="goCar(record, 2)">加入返修车</a>
                                                </li>
                                                <li *ngIf="record.status === 1">
                                                    <a (click)="goCar(record, 3)">加入送检车</a>
                                                </li>
                                                <li *ngIf="record.status === 1">
                                                    <a (click)="goCar(record, 4)">加入技改车</a>
                                                </li>
                                                <li
                                                    *ngIf="record.status === 1 || (record.status === 2 && record.operation === 1)">
                                                    <a (click)="outStock(record, 1)">借出/技改</a>
                                                </li>

                                                <li
                                                    *ngIf="record.status === 1 || (record.status === 2 && record.operation === 2)">
                                                    <a (click)="outStock(record, 2)">返修</a>
                                                </li>

                                                <li
                                                    *ngIf="record.status === 1 || (record.status === 2 && record.operation === 3)">
                                                    <a (click)="outStock(record, 3)">送检</a>
                                                </li>
                                                <li
                                                    *ngIf="record.status === 1 || (record.status === 2 && record.operation === 4)">
                                                    <a (click)="outStock(record, 4)">技改</a>
                                                </li>
                                                <li *ngIf="record.status === 1">
                                                    <a (click)="outStock(record)">隔离</a>
                                                </li>
                                                <li *ngIf="record.status === 1">
                                                    <a (click)="outStock(record)">报废</a>
                                                </li>
                                                <li>
                                                    <a
                                                        (click)="createOrEditToolingModal.show(record.id)">{{l('Edit')}}</a>
                                                </li>
                                                <li>
                                                    <a (click)="deleteTooling(record)">{{l('Delete')}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 名称</span>
                                        {{ record.title }} <span
                                            class="m-badge m-badge--danger">{{ record.statusName }}</span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 工装图号</span>
                                        {{record.subTitle}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 有无图纸</span>
                                        <span *ngIf="record.isDrawing === null"></span>
                                        <span *ngIf="record.isDrawing">有</span>
                                        <span *ngIf="record.isDrawing !== null && !record.isDrawing">无</span>
                                    </td>
                                    <td style="width: 250px">
                                        <span class="ui-column-title"> 对应产品图号</span>
                                        {{record.drawingCodes}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 型号</span>
                                        {{record.model}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 钢印号</span>
                                        {{record.stamp}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 位置</span>
                                        {{record.location}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 检定类别</span>
                                        {{record.categoryName}}
                                        <span
                                            *ngIf="record.nextVerificationDate && record.nextVerificationDate.diff(nowMoment,'days') <= 30">
                                            <span style='display:block;'>送检日期:<br>
                                                <b style='color:red;'>
                                                    {{ record.nextVerificationDate | momentFormat:'YYYY-MM-DD'}}</b>
                                            </span>
                                        </span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 工装类型</span>
                                        {{record.classificationName}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 制造日期</span>
                                        {{ record.manufactureDate | momentFormat:'YYYY-MM-DD'}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 入库日期</span>
                                        {{ record.intoStockDate | momentFormat:'YYYY-MM-DD'}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 接收时间</span>
                                        {{ record.receiptTime | momentFormat:'YYYY-MM-DD'}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 制造单位</span>
                                        {{record.manufacturer}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 组配件</span>
                                        {{record.groupParts}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 有无合格证</span>
                                        <span *ngIf="record.certificate === null"></span>
                                        <span *ngIf="record.certificate">有</span>
                                        <span *ngIf="record.certificate !== null && !record.certificate">无</span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 有无交接单</span>
                                        <span *ngIf="record.handover === null"></span>
                                        <span *ngIf="record.handover">有</span>
                                        <span *ngIf="record.handover !== null && !record.handover">无</span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 有无履历卡</span>
                                        <span *ngIf="record.toolingRecord === null"></span>
                                        <span *ngIf="record.toolingRecord">有</span>
                                        <span *ngIf="record.toolingRecord !== null && !record.toolingRecord">无</span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 有无检定卡</span>
                                        <span *ngIf="record.isVerificationCard === null"></span>
                                        <span *ngIf="record.isVerificationCard">有</span>
                                        <span
                                            *ngIf="record.isVerificationCard !== null && !record.isVerificationCard">无</span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 需周期检定</span>
                                        <span *ngIf="record.isNeedVerification">是</span>
                                        <span *ngIf="!record.isNeedVerification">否</span>
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 鉴定日期</span>
                                        {{ record.verificationDate | momentFormat:'YYYY-MM-DD'}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 鉴定有效期</span>
                                        {{ record.nextVerificationDate | momentFormat:'YYYY-MM-DD'}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 其他资料</span>
                                        {{record.groupParts}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 最大载荷</span>
                                        {{record.maxLoad}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 所属资产</span>
                                        {{record.belongTo}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 责任人</span>
                                        {{record.responsible}}
                                    </td>
                                    <td style="width: 150px">
                                        <span class="ui-column-title"> 工艺员</span>
                                        {{record.technologist}}
                                    </td>
                                    <td style="width: 200px">
                                        <span class="ui-column-title"> 备注</span>
                                        {{record.remark}}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{l('NoData')}}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #paginator
                                (onPageChange)="getToolings($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                共计：{{primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </div>
            </div>
        </div>
    </div>
    <createOrEditToolingModal #createOrEditToolingModal (modalSave)="getToolings()"></createOrEditToolingModal>
    <actionToolingModal #actionToolingModal (modalSave)="getToolings()"></actionToolingModal>
    <editOutOrBackToolingModal #editOutOrBackToolingModal (modalSave)="getToolings()"></editOutOrBackToolingModal>

</div>
